@value gridLine from '../metrics/metrics.css';
@value halfGridLine from '../metrics/metrics.css';

@value SanguoshaFont from '../metrics/metrics.css';

@value wuColor from '../metrics/metrics.css';
@value weiColor from '../metrics/metrics.css';
@value shuColor from '../metrics/metrics.css';
@value qunColor from '../metrics/metrics.css';
@value godColor from '../metrics/metrics.css';
@value wuDarkColor from '../metrics/metrics.css';
@value weiDarkColor from '../metrics/metrics.css';
@value shuDarkColor from '../metrics/metrics.css';
@value qunDarkColor from '../metrics/metrics.css';
@value godDarkColor from '../metrics/metrics.css';

.badge {
    font-family: SanguoshaFont;
    position: relative;
    font-size: 20px;
    color: white;
    padding-left: calc(gridLine * 3);
    text-shadow: 0px 0px 3px rgba(50, 50, 50, 0.87), 0px 0px 5px rgba(50, 50, 50, 0.87),
        0px 0px 7px rgba(50, 50, 50, 0.87);
    word-wrap: break-word;
    height: calc(gridLine * 18);
    width: calc(gridLine * 4);
    min-width: initial;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-left: 0;
}
.badge.small {
    height: calc(gridLine * 15);
    width: calc(gridLine * 3);
    padding-left: calc(gridLine / 2);
    font-size: 18px;
}
.nationalityBadge {
    position: absolute;
    top: 0;
    left: -5px;
    height: 100%;
    z-index: -1;
}

.badgeContext {
    align-items: center;
    padding-top: calc(8px * 5);
    display: flex;
}

.playerPhase {
    width: 100%;
    text-align: center;
}
.playerPhaseBadge {
    height: 100%;
}

.prepareStage {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #c61ea1 30%, #c61ea1 70%, rgba(0, 0, 0, 0) 100%);
}
.judgeStage {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #5929d6 30%, #5929d6 70%, rgba(0, 0, 0, 0) 100%);
}
.drawStage {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #c6971e 30%, #c6971e 70%, rgba(0, 0, 0, 0) 100%);
}
.playStage {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1ec643 30%, #1ec643 70%, rgba(0, 0, 0, 0) 100%);
}
.dropStage {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #a6d629 30%, #a6d629 70%, rgba(0, 0, 0, 0) 100%);
}
.finishStage {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1e4dc6 30%, #1e4dc6 70%, rgba(0, 0, 0, 0) 100%);
}
